<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #div1{
                width:200px; 
                height:50px; 
                border:1px solid blue;
                display: none;
                background: gray;
            }
        </style>
        <script>
            function show() {
                // 把id=div1的div显示出来
                document.getElementById('div1').style.display='block';
                document.getElementById('div1').style.width='300px';
                document.getElementById("btn").value='隐藏';
            }

            function hide() {
                document.getElementById('div1').style.display='none';
                document.getElementById("btn").value='显示';
            }
        </script>
        <!-- <script src="first.js"></script> -->
    </head>
    <body>
        <input id="btn" value="显示" type="button"
         onmouseover="javascript:show();" onmouseout="javascript:hide();">
        <div id="div1">
            要显示隐藏的的内容。。。。
        </div>
    </body>
</html>
